<script setup>
    
</script>

<template>
  <div>
    <!-- 声明式导航栏 -->
    <nav class="navigation">
      <!-- <router-link :to='{
        "path": "/discover", 
        "query": {
          "id": 10086, 
          "name": "careathers"
          }
      }' class="nav-link">发现</router-link> -->

      <router-link to='/discover' class="nav-link">发现</router-link>
      <router-link to='/friend' class="nav-link">关注</router-link>
      <router-link to='/homepage' class="nav-link">主页</router-link>
    </nav>
    <!-- router出口 -->
    <router-view></router-view>
    <!-- 尾部内容 -->
     <footer>
      <p>这是一个固定的尾部</p>
     </footer>
  </div>
</template>

<style scoped>
  .navigation {
    height: 60px;
    display: flex;
  }
  .nav-link {
    display: block;
    width: 110px;
    height: 60px;
    text-align: center;
    line-height: 60px;

    text-decoration: none;

    background-color: #88d609;
    border: #000 1px solid;
  }
  .router-link-active {
    background-color: #09e05c;
  }
  footer {
    height: 80px;
    background-color: #f19203;
    text-align: center;
    line-height: 80px;
  }

</style>